<template>
    <div class="collection">
        <div class="top">
            <icon class="el-icon-collection-tag" type="error" size="100"><span>我的收藏</span> </icon>
        </div>
        <ul>
            <li v-for="(item, index) in list" :key="index" >
                <span class="del">
                    <el-popconfirm title="你确定要删除吗？" @confirm="del(item)">
                        <span slot="reference">X</span>
                    </el-popconfirm>
                </span>
                <img :src="'http://101.132.181.9:3000/' + item.product_picture" class="img" @click="detailsPage(item)">
                <div class="div" @click="detailsPage(item)">
                    <p>{{ item.product_name }}</p>
                    <p class="text" style="font-size: 14px; color: #b0b0b0;">{{ item.product_title }}
                    </p>
                    <p><span style="font-size: 16px; margin-right: 5px; color: #ff6700;">{{
                            item.product_selling_price
                    }}</span><s style="font-size: 16px; color: #b0b0b0;">{{ item.product_price }}</s></p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import { getCollection, delCollection } from '../api/api'
export default {
    data() {
        return {
            list: []
        }
    },
    methods: {
        async getCollection() {
            try {
                let id = this.$store.state.id
                const { collectList } = await getCollection({ user_id: id })
                this.list = collectList
            } catch (error) {

            }

        },
        async del(val) {
            console.log(val);
            try {
                let id = this.$store.state.id
                await delCollection({ user_id: id, product_id: val.product_id })
                this.$notify({
                    title: '成功',
                    message: '删除商品',
                    type: 'success'
                });
                this.getCollection()
            } catch (error) {

            }
        },
        detailsPage(item){
            this.$router.push('/detailsPage')
            this.$store.commit('detailsPage',item.product_id)
        }
    },
    computed: {},
    components: {},
    created() {
        this.getCollection()
    },
}
</script>
<style lang="scss" scoped>
.collection {
    width: 100%;

    .top {
        line-height: 100px;
        border-bottom: 2px solid #ff6700;

        icon {
            font-size: 32px;

            span {
                padding-left: 10px;
                color: #000;
            }

            margin-right: 20px;
        }

        span {
            margin-top: 10px;
            color: #757575;
        }
    }

    ul {
        display: flex;
        flex-wrap: wrap;

        .img {
            width: 70%;
            height: 60%;
            display: block;
            margin: 0 auto;
        }

        li {
            position: relative;
            width: 238px;
            height: 290px;
            margin-left: 20px;
            margin-top: 10px;
            background: #fff;

            .del {
                position: absolute;
                right: 10px;
                top: 10px;
                color: #757575;
                cursor: pointer;
                display: none;
            }

            .text {
                margin: 15px 0;
            }

            p {
                text-align: center;
                font-size: 16px;
            }

            .div {
                margin-top: 20px;
            }
        }

        .liu1 {
            text-align: center;
            line-height: 290px;
        }

        .liu:hover {
            color: #ff6700;
            cursor: pointer;
        }

        li:hover {
            box-shadow: 5px 5px 20px #c0bcbc;
            transition: .4s;

            .del {
                display: block;
            }
        }
    }
}
</style>